<template>
  <div>
    <el-form ref="cateForm" :rules="cateRules" :model="cate" label-width="80px">
      <el-form-item label="分类名称" prop="cateName">
        <el-input v-model="cate.cateName"></el-input>
      </el-form-item>
      <el-form-item label="父级父类">
        <el-select v-model="cate.pid" placeholder="请选择一个父级父类">
          <el-option label="顶层分类" :value="0"></el-option>
          <el-option
            v-for="cate in cates"
            :key="cate.id"
            :label="cate.cateName"
            :value="cate.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-switch v-model="cate.enabled"></el-switch>
      </el-form-item>
      <el-form-item label="分类图标">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="/api/upload"
          name="file"
          :auto-upload="false"
          :data="{
            a: 10,
            b: 20
          }"
          :before-upload="beforeFileUpload"
          :on-success="uploadSuccess"
         >
           <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
           <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitCate">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addCate } from '_api'

export default {
  props: {
    cates: {
      // 已有所有分类数
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 增加表单
      cate: {
        cateName: '',
        enabled: true,
        icon: '',
        pid: 0
      },
      // 表单验证规则
      cateRules: {
        cateName: [
          {
            required: true,
            message: '分类名必须填写'
          }
        ]
      }
    }
  },
  methods: {
    beforeFileUpload (file) {
      // 上传前拦截
      if (file.size > 1024 * 500) {
        alert('请上传小于500kb的图片')
        return false
      } else {
        return true
      }
    },
    submitUpload () {
      // 点击手动上传分类图标
      this.$refs.upload.submit()
    },
    uploadSuccess (res, file) {
      // 图片上传成功回调
      if (res.code === 200) {
        this.cate.icon = res.data
      }
    },
    onSubmitCate () {
      /*
        判断表单的所有验证规则是否全部通过
        通过允许提交
      */
      this.$refs.cateForm.validate((valid) => {
        if (valid) {
          // 验证通过可以提交
          this.cate.enabled = this.cate.enabled ? 0 : 1
          addCate(this.cate).then(res => {
            if (res.data.code === 200) {
              // 弹出成功提示 并刷新
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 2000,
                onClose: () => {
                  this.$router.go(0)
                }
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
